<template>
  <div>
    <div class="header-wrap">
      <el-menu
        :default-active="activeIndex"
        class="header computerNav"
        background-color="#9a0e14"
        mode="horizontal"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="1"
          ><router-link :to="{ name: 'Home' }">首页</router-link></el-menu-item
        >
        <el-sub-menu index="2">
          <template #title> 社团概况 </template>
          <el-menu-item index="2-1"
            ><router-link :to="{ name: 'Passage', params: { id: 1 } }"
              >社团联简介</router-link
            ></el-menu-item
          >
          <el-menu-item index="2-2"
            ><router-link :to="{ name: 'Passage', params: { id: 2 } }"
              >社团简介</router-link
            ></el-menu-item
          >
          <el-menu-item index="2-3"
            ><router-link :to="{ name: 'Passage', params: { id: 3 } }"
              >机构设置</router-link
            ></el-menu-item
          >
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title> 社团快讯 </template>
          <el-menu-item index="3-1"
            ><router-link
              :to="{ name: 'PassageList', query: { passageTypeId: 1 } }"
              >重要通知</router-link
            ></el-menu-item
          >
          <el-menu-item index="3-2"
            ><router-link
              :to="{ name: 'PassageList', query: { passageTypeId: 2 } }"
              >社团要闻</router-link
            ></el-menu-item
          >
          <el-menu-item index="3-3"
            ><router-link
              :to="{ name: 'PassageList', query: { passageTypeId: 1 } }"
              >重要通知</router-link
            ></el-menu-item
          >
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title> 社团风采 </template>
          <el-menu-item index="4-1"
            ><router-link :to="{ name: 'ActivityList', query: { typeId: 1 } }"
              >活动预告</router-link
            ></el-menu-item
          >
          <el-menu-item index="4-2"
            ><router-link :to="{ name: 'ActivityList', query: { typeId: 2 } }"
              >精彩活动回顾</router-link
            ></el-menu-item
          >
        </el-sub-menu>
        <el-menu-item index="5"
          ><router-link :to="{ name: 'ClubList', query: { typeId: 1 } }"
            >社团检索</router-link
          ></el-menu-item
        >
        <el-menu-item index="6"
          ><router-link :to="{ name: 'FileList', query: { fileTypeId: 3 } }"
            >资料下载</router-link
          ></el-menu-item
        >
        <el-sub-menu index="7">
          <template #title> 社团反馈 </template>
          <el-menu-item index="7-1">
            <a
              target="_blank"
              href="http://wpa.qq.com/msgrd?v=3&uin=2804774882&site=qq&menu=yes"
            >
              <img
                border="0"
                src="http://wpa.qq.com/pa?p=2:2804774882:51"
                alt="点击这里给我发消息"
                title="QQ交流"
              />
            </a>
          </el-menu-item>
          <el-menu-item index="7-2">
            <a
              target="_blank"
              href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=d0VPR0NAQENPT0U3BgZZFBga"
              style="text-decoration: none"
            >
              <img
                src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png"
              />
            </a>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="8">
          <a href="#" @click="goAdminUrl">跳到后台</a>
        </el-menu-item>
      </el-menu>
      <div class="user-info">
        <template v-if="isLoggedIn">
          <a href="#" @click.prevent="logout">你好，{{ username }}</a>
        </template>
        <template v-else>
          <router-link :to="{ name: 'LoginRegister' }">登录/注册</router-link>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { useUserStore } from "../../stores/user";

const userStore = useUserStore();
const OK = 200;
const activeIndex = ref("1");
// const adminAccessUrl = ref("http://118.89.228.250:8012");
const isLoggedIn = ref(false);
const username = ref("");

// const getAdminUrl = async () => {
//   try {
//     const res = await axios.get("/api/system/adminUrl");
//     if (res.data.code === OK) {
//       adminAccessUrl.value = res.data.data;
//     }
//   } catch (error) {
//     console.error("获取管理员URL失败:", error);
//   }
// };

const goAdminUrl = () => {
  window.open("http://localhost:8080", "_blank");
};

const logout = () => {
  isLoggedIn.value = false;
  username.value = "";
  // 可以在这里添加退出登录的逻辑，比如清除 token 等
};

onMounted(() => {
  // getAdminUrl();
  // 模拟用户登录状态，实际项目中应该从 localStorage 或 Vuex 中获取
  isLoggedIn.value = true;
  username.value = "用户";
});
</script>

<style scoped>
.header-wrap {
  background-color: #9a0e14;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.phone-nav {
  display: none;
}
.header {
  width: 1040px;
  height: 70px;
  line-height: 70px;
  margin: 0 auto;
}
.user-info {
  color: #fff;
  font-size: 16px;
}
.el-menu.el-menu--horizontal a {
  color: #fff;
}
.rightMenu {
  float: right;
  height: 70px;
  line-height: 70px;
  background-color: #000000;
}
a {
  text-decoration: none;
  color: #eee;
  font-size: 16px;
}
</style>
